<template>
    <div class="login-wrapper">
        <div class="logo">
            <img src="/src/assets/img/loginLogo.png" alt="">
        </div>
        <div class="main-box">
            <input class="text-box single-line" @keyup.enter="login" id="UserName" name="UserName" type="text" v-model="form.username">
            <input id="UserPwd" name="UserPwd" @keyup.enter="login" type="password" v-model="form.password">
            <el-checkbox id="remmemberme" v-model="remmemberme">记住密码</el-checkbox>
            <button type="submit" style="cursor:pointer" @click="login">
                <img src="/src/assets/img/button.png">
            </button>
        </div>
    </div>
</template>

<script>
import _ from 'lodash'
import {getModule} from '../scripts/moduleTransform'
import { encrypt, decrypt} from '../scripts/crypto.js'

export default {
    name: 'login',
    data: function() {
        var password = this.getCookie('password')
        password = decrypt(password)
        return {
            form:{
                username: this.getCookie('username'),
                password: password
            },
            remmemberme: false
        }
    },
    methods:{
        setCookie(c_name,value,expiredays){
            var exdate=new Date()
            exdate.setDate(exdate.getDate()+expiredays)
            document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
        },
        getCookie(c_name){
            if (document.cookie.length>0)
            {
            var c_start=document.cookie.indexOf(c_name + "=")
            if (c_start!=-1)
                { 
                c_start=c_start + c_name.length+1 
                var c_end=document.cookie.indexOf(";",c_start)
                if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
                } 
            }
            return ""
        },
        login(){
            if(!(this.form.username && this.form.password)){
                this.$message.error("用户名或密码不能为空");
                return
            }
            // 密码加密
            let password = encrypt(this.form.password)
            
            if(this.remmemberme){
                this.setCookie('username', this.form.username, 7)
                this.setCookie('password', password, 7)
            }

            this.$$http("USER_LOGIN", null, {
                username: this.form.username,
                password: password,
                time: new Date().getTime()
            }).then(data=>{
                if(data.msg == "ok"){
                    _.forEach(data.obj, (item, key)=>{
                        localStorage[key]=item
                    })
                    localStorage.isLogin = true;
                    localStorage.removeItem('password')
                    let target = this.$store.state.routeTarget;
                    this.$message.success("登录成功");
                    if(target){
                        this.$router.push(target)
                    }else{
                        this.$router.push(`/content/tzgg`)
                    }
                    this.$store.commit('SET_FROM_LOGIN', true);
                } else {
                    data.msg = data.msg == "error password" ? "用户名或者密码错误" : data.msg;
                    this.$message.error(data.msg)
                }
            })
        },
    }
}
</script>

<style lang="scss">
.login-wrapper{
    height: 100%;
    background: url('/src/assets/img/backimg.jpg');
    background-size: cover;
    .logo{
        text-align: center;
        img{
            margin: 60px auto;
        }
        
    }
    .main-box{
        margin: 0 auto;
        position: relative;
        width: 384px;
        height: 379px;
        background: url('/src/assets/img/loginBack.png');
        input{
            padding-left: 10px
        }
        #UserName {
            position: absolute;
            left: 145px;
            top: 174px;
            height: 28px;
            width: 173px;
            border: 0px;
        }
        #UserPwd {
            position: absolute;
            left: 145px;
            top: 222px;
            height: 28px;
            width: 173px;
            border: 0px;
        }
        #remmemberme{
            position: absolute;
            left: 55px;
            top: 268px;
            height: 28px;
            width: 173px;
            border: 0px;
        }
        button {
            position: absolute;
            left: 55px;
            top: 312px;
            padding: 0px;
            border: 0px;
        }
    }
}
</style>